<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">box</div>

    <div id="wrapper">wrapper
        <div class=".item">item</div>
        <div class=".item">item</div>
        <div class=".i">i</div>
    </div>
    <span>span</span>
</body>
<!-- 
    // 装一个函数MySelector，该函数的作用是根据传入的参数来获取指定的DOM对象，该函数可以传
    // 入两个参数，参数1是字符串（ID名/类名/标签名），参数2为可选的，代表参数1的上下文，如果不传默
    // 认为document
    // 选择器引擎，获取指定上下文的DOM对象

-->
<script>

    // function MySelector(selector, context) {
    //     // 如果上下文是字符串，则将其转换为DOM元素
    //     if (typeof context === 'string') {
    //         context = document.querySelector(context);
    //     }
    //     // 如果没有传入参数context，则默认使用document
    //     if (context === undefined || context === null) {
    //         context = document;
    //     }
    //     if (selector) {
    //         // 类选择器
    //         if (selector[0] === '.') {
    //             return context.getElementsByClassName(selector.slice(1));
    //         }
    //         // ID选择器
    //         else if (selector[0] === '#') {
    //             return context.getElementById(selector.slice(1));
    //         }
    //         // 标签选择器
    //         else {
    //             return context.getElementsByTagName(selector);
    //         }
    //     } else {
    //         return alert('请求错误');
    //     }
    // }
    // // 获取id为box的DOM对象
    // var box = MySelector('#box');
    // // 获取id为wrapper的DOM对象下的所有类名为item的DOM对象
    // var itemsInWrapper = MySelector('.item', '#wrapper');
    // // 获取所有的span标签对应的DOM对象
    // var allSpans = MySelector('span');
    // console.log(box);
    // console.log(itemsInWrapper);
    // console.log(allSpans);



    // jQuery
    // function $(selector, content) {
    // 1.判断有没有传参，如果传参
    //1.1如果传的是两个参数
    //如果传的是字符串
    // 如果传的是id选择器
    // 如果传的是类选择器
    // 如果传的是标签选择器
    // 否则（不是字符串），返回不是字符串
    //1.2如果传的是一个参数
    //如果传的是字符串
    // 如果传的是id选择器
    // 如果传的是类选择器
    // 如果传的是标签选择器
    // 否则（不是字符串），返回不是字符串
    // 否则（没有传参），直接返回


    //     if (selector) {// 1.判断有没有传参，如果传参
    //         if (arguments.length === 2) {//1.1如果传的是两个参数
    //             if (typeof selector === 'string') { //如果传的是字符串
    //                 if (selector.includes('#')) {// 如果传的是id选择器
    //                     return content.getElementById(selector.slice(1))

    //                 } else if (selector.includes('.')) { // 如果传的是类选择器
    //                     return content.getElementsByClassName(selector.slice(1))

    //                 } else {  // 如果传的是标签选择器
    //                     return content.getElementsByTagName(selector)
    //                 }

    //             } else {// 否则（不是字符串），返回不是字符串
    //                 return alert('不是字符串');
    //             }

    //         } else { //1.2如果传的是一个参数
    //             if (typeof selector === 'string') { //如果传的是字符串
    //                 if (selector.includes('#')) {// 如果传的是id选择器
    //                     return document.getElementById(selector.slice(1))
    //                 } else if (selector.includes('.')) { // 如果传的是类选择器
    //                     return document.getElementsByClassName(selector.slice(1))
    //                 } else {  // 如果传的是标签选择器
    //                     return document.getElementsByTagName(selector)
    //                 }

    //             } else {// 否则（不是字符串），返回不是字符串
    //                 return alert('不是字符串');
    //             }
    //         }
    //     } else {  // 否则（没有传参），直接返回
    //         return;
    //     }
    // }
    // console.log($('#box'));// 获取id为box的DOM对象
    // // console.log($('.item', '#wrapper'));// 获取id为wrapper的DOM对象下的所有类名为item的DOM对象
    // console.log($('span')); // 获取所有的span标签对应的DOM对象

</script>

</html>